<template>
  <view class="page_min_height bg-white page_fixed_button">
    <view
      class="flex justify-between px-20 pt-20 pb-30"
      style="background-image: linear-gradient(to bottom, #f5f6f7, #dfeaff)"
    >
      <view>
        <view class="text-2xl font-medium">法律建议</view>
        <view class="flex items-center gap-x-4 mt-10 text-gray-400">
          <uni-icons type="checkbox-filled" color="" size="18" />
          <view>邀请专业律师解答</view>
        </view>
        <view class="flex items-center gap-x-4 mt-4 text-gray-400">
          <uni-icons type="checkbox-filled" color="" size="18" />
          <view>为您提供专业的法律意见指导</view>
        </view>
      </view>
      <image class="w-88 h-88" src="/static/images/suggest.png" mode="aspectFill" />
    </view>
    <view class="mt-[-12px] p-12 bg-white rounded-tl-xl rounded-tr-xl overhow-hidden">
      <uni-forms ref="formEl" :modelValue="formData" label-width="6rem" :rules="rules" label-position="top">
        <uni-forms-item required label="诉求" name="appeal">
          <uni-easyinput v-model="formData.appeal" type="textarea" placeholder="请在这里留下您遇到的问题和诉求" />
        </uni-forms-item>
        <view class="mt-10">
          <UploadFileFormItem
            ref="uploadImageEl"
            fileType="imgFile"
            uploadKey="legal"
            :limit="5"
            :fileList="formData.attachment_ids"
            @change="uploadChange"
          />
        </view>
      </uni-forms>
      <view class="bottom_fixed_wrapper justify-between">
        <navigator class="w-[46%]" url="/pages/service/suggest/index" hover-class="none">
          <view class="py-12 text-30 text-center text-blue-600 bg-blue-200 rounded-md">咨询记录</view>
        </navigator>
        <view class="w-[46%] py-12 text-30 text-center primary_btn rounded-md" @click="onSubmit">提交信息</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, toRaw } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createConsultApi } from '@/api/service';
import { debounce, showToast, showLoginConfirm } from '@/utils/utils';
import { useUserIdentity } from '@/utils/usePublic';
import UploadFileFormItem from '@/components/UploadFileFormItem.vue';

const userIdentity = useUserIdentity();
const formData = ref({
  type: 'legal_advice',
  attachment_ids: [],
});
const formEl = ref(null);

const rules = {
  appeal: { rules: [{ required: true, errorMessage: '请输入诉求' }] },
};
let dataId = '';
onLoad(({ id = '' }) => {
  dataId = id;
  if (id) {
    // getDetail();
    uni.setNavigationBarTitle({
      title: '编辑咨询工单',
    });
  }
});

// 上传成功
function uploadChange(list = []) {
  formData.value.attachment_ids = list;
}

// 提交表单
const onSubmit = debounce(function () {
  if (!userIdentity.isLogin) {
    showLoginConfirm();
    return;
  }
  if (!userIdentity.isCustomer) {
    showToast('您还不是我们的客户哦~');
    return;
  }
  formEl.value
    .validate()
    .then(async () => {
      const data = { ...toRaw(formData.value) };
      data.attachment_ids = data.attachment_ids.map(item => item.fileId);
      const { code } = dataId ? await createConsultApi(dataId, { ...data }) : await createConsultApi({ ...data });
      if (code === 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'success',
        });
        getApp().globalData.isRefreshConsultList = true;
        setTimeout(() => {
          formData.value = {
            type: 'legal_advice',
            attachment_ids: [],
          };
          uni.navigateTo({
            url: '/pages/service/suggest/index',
          });
        }, 1000);
      }
    })
    .catch(() => {});
}, 300);

// async function getDetail() {
//   const { code, data } = await getContactsDetail(dataId);
//   if (code === 200) {
//     const {
//       name,
//       category_id,
//       contact_name,
//       phone,
//       address,
//       business_level,
//       tags,
//       credit_limit,
//       remarks,
//       initial_amount,
//       debt_start_time,
//     } = data;
//     formData.value = {
//       contact_type: 'customer',
//       name,
//       category_id,
//       contact_name,
//       phone,
//       address,
//       business_level,
//       tags,
//       credit_limit,
//       remarks,
//       initial_amount: math.divideBy100(initial_amount),
//       debt_start_time: debt_start_time,
//     };
//   }
// }
</script>
